<template>
    <div class="product">
        <div class="top-banner banner h-[678px] bg-[#F4FAF9] py-[60px]">
            <div class="w-[1200px] mx-auto flex flex-col items-center">
                <div id="intro" class="text-[42px] mb-[40px] animate-trigger">
                    人人以正茂风华，畅想生命之美
                </div>
            </div>
        </div>
        <a-affix :offset-top="0">
            <div class="bg-white">
                <div class="w-[1200px] mx-auto">
                    <div class="h-[112px] flex items-center justify-center">
                        <a-anchor
                            :target-offset="targetOffset"
                            :bounds="50"
                            :items="navItems"
                            class="custom-anchor"
                        />
                    </div>
                </div>
            </div>
        </a-affix>

        <div class="banner2 mx-auto py-[60px] bg-[#f4fafa]">
            <div class="w-[1200px] mx-auto">
                <a-timeline>
                    <a-timeline-item
                        v-for="(item, index) in timelineData"
                        :key="index"
                    >
                        <template #dot>
                            <div class="custom-dot">
                                <div class="inner-dot"></div>
                                <div class="ripple-1"></div>
                                <div class="ripple-2"></div>
                            </div>
                        </template>
                        <div class="timeline-content animate-trigger">
                            <div
                                class="text-[24px] font-500 mb-[16px] text-[#3C8916]"
                            >
                                {{ item.year }}
                            </div>
                            <div class="text-[16px] leading-[22px] text-[#666]">
                                {{ item.content }}
                            </div>
                        </div>
                    </a-timeline-item>
                    <a-timeline-item>
                        <template #dot>
                            <span></span>
                        </template>
                    </a-timeline-item>
                </a-timeline>
            </div>
        </div>
        <div id="service" class="py-[60px] w-[1200px] mx-auto">
            <Title title="健康服务" desc="HEALTH SERVICES" />
            <div class="flex justify-between mt-[60px]">
                <div
                    v-for="(item, index) in services"
                    :key="index"
                    class="w-[270px] text-center animate-trigger"
                    :style="{ transitionDelay: `${index * 0.2}s` }"
                >
                    <div class="text-[#BFBFBF] font-bold text-[22px] mb-[12px]">
                        {{ item.num }}
                    </div>
                    <div class="w-[46px] h-[46px] mx-auto mb-[12px]">
                        <img
                            :src="item.icon"
                            :alt="item.title"
                            class="w-full h-full"
                        />
                    </div>
                    <div class="text-[20px] font-500 mb-[12px]">
                        {{ item.title }}
                    </div>
                    <div class="text-[14px] leading-[24px] text-[#666]">
                        {{ item.desc }}
                    </div>
                </div>
            </div>
        </div>

        <div id="team" class="py-[60px] bg-[#f3faf9]">
            <div class="w-[1200px] mx-auto">
                <Title title="团队介绍" desc="TEAM INTRODUCTION" />

                <!-- 专家团队 -->
                <div
                    class="w-full flex text-[24px] justify-center mt-[60px] mb-[40px] items-center gap-[12px]"
                >
                    <img :src="left" class="w-[78px] h-[2px]" alt="left" />
                    <span>覆盖多学科的专家团队</span>
                    <img :src="right" class="w-[78px] h-[2px]" alt="right" />
                </div>
                <div class="text-center mb-[40px]">
                    <div class="text-[14px] text-[#666] leading-[24px]">
                        以长寿领域的顶尖华人科学家余金博士为首席专家团队，为您解答健康疑问，针对您的<br />
                        身体状况和健康需求，量身打造健康管理方案
                    </div>
                </div>

                <!-- 专家团队轮播 -->
                <div class="mb-[80px]">
                    <div class="grid grid-cols-2 gap-[30px]">
                        <div
                            v-for="(expert, index) in expertTeam"
                            :key="expert.name"
                            class="bg-white rounded-l-[16px] flex animate-trigger"
                            :style="{ transitionDelay: `${index * 0.1}s` }"
                        >
                            <div class="w-[226px] h-[358px] shrink-0">
                                <img
                                    :src="expert.avatar"
                                    :alt="expert.name"
                                    class="w-full h-full object-cover rounded-l-[8px]"
                                />
                            </div>
                            <div class="flex-1 p-[30px]">
                                <div
                                    class="flex items-center gap-[12px] mb-[16px]"
                                >
                                    <span class="text-[24px] font-500">{{
                                        expert.name
                                    }}</span>
                                    <span
                                        class="text-[18px] font-500 text-[#666]"
                                        >/{{ expert.title }}</span
                                    >
                                </div>
                                <div
                                    class="text-[14px] text-[#666] leading-[24px]"
                                >
                                    <div
                                        v-for="(desc, i) in expert.description"
                                        :key="i"
                                        class="mb-[8px]"
                                    >
                                        {{ desc }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 服务团队 -->
                <div
                    class="w-full flex text-[24px] justify-center mb-[40px] items-center gap-[12px]"
                >
                    <img :src="left" class="w-[78px] h-[2px]" alt="left" />
                    <span>多对一的健康顾问服务团队</span>
                    <img :src="right" class="w-[78px] h-[2px]" alt="right" />
                </div>

                <div class="text-center w-[854px] mx-auto mb-[40px]">
                    <div class="text-[14px] text-[#666] leading-[24px]">
                        由全科医生、专业营养师及运动教练组成的多对一健康顾问团队，随时解答您的营养健康疑问，无论是日常饮食搭配、营养素的摄入建议，还是运动计划的制定与执行，我们都将为您提供最专业、最贴心的指导
                    </div>
                </div>

                <!-- 服务团队展示 -->
                <div class="grid grid-cols-3 gap-[30px]">
                    <div
                        v-for="(member, index) in serviceTeam"
                        :key="index"
                        class="bg-white animate-trigger"
                        :style="{ transitionDelay: `${index * 0.1}s` }"
                    >
                        <!-- 只给顶部加圆角 -->
                        <div
                            class="mb-[24px] w-[380px] h-[265px] overflow-hidden rounded-t-[8px]"
                        >
                            <img
                                :src="member.avatar"
                                :alt="member.name"
                                class="w-full h-full object-cover"
                            />
                        </div>
                        <div class="text-left p-[40px]">
                            <div
                                class="flex items-center justify-start gap-[8px] mb-[16px]"
                            >
                                <span class="text-[24px] font-500">{{
                                    member.name
                                }}</span>
                                <span class="text-[18px] font-500">{{
                                    member.title
                                }}</span>
                            </div>
                            <div class="text-[14px] text-[#666] leading-[24px]">
                                <div
                                    v-for="(desc, i) in member.description"
                                    :key="i"
                                    class="mb-[4px]"
                                >
                                    {{ desc }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="equipment" class="py-[60px]">
            <Title title="设备介绍" desc="EQUIPMENT INTRODUCTION" />

            <div
                class="w-[854px] mx-auto mt-[40px] mb-[60px] text-center text-[#595959] text-[14px]"
            >
                由鹰眼检测、Inbody人体分析仪、魔镜皮肤检测仪、智能微体检、AI智能分析系统等辅助检测，定期的健康评估与检测报告，及时发现您健康状况的细微变化，不断调整和优化您的专属健康管理方案，确保您始终朝着最佳健康状态的目标前进
            </div>

            <div class="w-[1200px] mx-auto">
                <a-tabs v-model:activeKey="activeKey" class="equipment-tabs">
                    <a-tab-pane
                        v-for="item in equipmentList"
                        :key="item.key"
                        :tab="item.tab"
                    >
                        <div class="flex">
                            <div class="w-[720px] h-[430px]">
                                <img
                                    :src="item.image"
                                    :alt="item.tab"
                                    class="w-full h-full rounded-[8px]"
                                />
                            </div>
                            <div class="flex-1 bg-[#f3faf9] p-[40px]">
                                <div
                                    class="text-[24px] mb-[10px] text-[#262626]"
                                >
                                    {{ item.title }}
                                </div>
                                <div class="text-[18px] mb-[40px]">
                                    设备介绍
                                </div>
                                <div
                                    class="text-[14px] leading-[24px] text-[#666] mb-[62px]"
                                >
                                    {{ item.description }}
                                </div>
                                <div class="flex gap-[40px]">
                                    <div
                                        v-for="(
                                            feature, index
                                        ) in item.features"
                                        :key="index"
                                        class="text-center"
                                    >
                                        <div
                                            class="w-[48px] h-[48px] mx-auto mb-[8px]"
                                        >
                                            <img
                                                w-full
                                                h-full
                                                :src="feature.icon"
                                                :alt="feature.text"
                                            />
                                        </div>
                                        <div class="text-[14px] text-[#3C8916]">
                                            {{ feature.text }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Title } from '../components/home/index.js'
import 'swiper/css'
import 'swiper/css/navigation'

import left from '../assets/images/product/left.png'
import right from '../assets/images/product/right.png'

import j_1 from '../assets/images/product/j_1.png'
import j_2 from '../assets/images/product/j_2.png'
import j_3 from '../assets/images/product/j_3.png'
import j_4 from '../assets/images/product/j_4.png'

import sjx from '../assets/images/product/sjx.png'
import jk from '../assets/images/product/jk.png'
import ly from '../assets/images/product/ly.png'
import lj from '../assets/images/product/lj.png'
import gxf from '../assets/images/product/gxf.png'

import sb_1 from '../assets/images/product/sb_1.png'
import sb_2 from '../assets/images/product/sb_2.png'
import sb_3 from '../assets/images/product/sb_3.png'
import sb_4 from '../assets/images/product/sb_4.png'
import sb_5 from '../assets/images/product/sb_5.png'

import s_1 from '../assets/images/product/s_1.png'
import s_2 from '../assets/images/product/s_2.png'
import s_3 from '../assets/images/product/s_3.png'
import s_4 from '../assets/images/product/s_4.png'

const timelineData = [
    {
        year: '2020年',
        content:
            '成都百岁人生健康科技有限公司成立，旨在为用户提供专业的、系统的数字化健康管理服务。'
    },
    {
        year: '2024年',
        content:
            '公司邀请国际知名抗衰品牌Jimtnit创始人、长寿领域的杰出华人科学家余金博士主任首席技术顾问，以严谨的科研理念为根基，以领先的创新技术为引擎，公司创立精准营养健康品牌ACEHEAL艾斯康'
    },
    {
        year: 'ACEHEAL艾斯康',
        content:
            '以"探索生命奥秘，延延健康寿命"为使命，结合精准分子营养学与国际新沿技术，通过循证医学掌握多，为用户提供以个性化精准营养方案为支撑、专业级膳食营养补充剂为支持、个体健康动态数据为基石的健康管理服务'
    }
]

const targetOffset = ref<number>(112)
const activeKey = ref('1')

const navItems = [
    {
        key: 'intro',
        href: '#intro',
        title: '企业介绍'
    },
    {
        key: 'service',
        href: '#service',
        title: '健康服务'
    },
    {
        key: 'team',
        href: '#team',
        title: '团队介绍'
    },
    {
        key: 'equipment',
        href: '#equipment',
        title: '设备介绍'
    }
]

// 健康服务数据
const services = [
    {
        num: '01',
        icon: j_1, // 替换为实际图标路径
        title: '精细化整体抗衰',
        desc: '覆盖全球领先的科学家资源网络，提供科学、系统、精准、有效的整体抗衰服务，帮助用户预防健康风险，改善生命质量'
    },
    {
        num: '02',
        icon: j_2,
        title: '个性化精准营养',
        desc: '根据科学检测报告，基于精准分析结果，提供定制个性化精准营养方案，停复和改善各种健康问题'
    },
    {
        num: '03',
        icon: j_3,
        title: '数字化健康管理',
        desc: '动态关注健康指标，评估健康状况，以最佳健康状态为目标，及时调整数字化干预方案'
    },
    {
        num: '04',
        icon: j_4,
        title: '多维度身心疗愈',
        desc: '以积极心理学为核心，建立积极的思维模式与行为方式，提升个人幸福感和生活品质'
    }
]

// 服务团队数据
const serviceTeam = [
    {
        name: '鲁菁',
        title: '/金牌抗衰专家',
        avatar: 'https://oss.acehls.com/obj/luqing.png',
        description: ['重庆医科大学', '抗衰老全科医生', '从事临床内科10余年']
    },
    {
        name: '马騉',
        title: '/金牌营养研究员',
        avatar: "https://oss.acehls.com/obj/makun.png",
        description: [
            '英国利兹大学营养学硕士',
            '卡迪夫大学生物制药荣誉学士',
            '英国营养协会注册营养师'
        ]
    },
    {
        name: '姜勇强',
        title: '/金牌健康讲师',
        avatar: 'https://oss.acehls.com/obj/jiangyongqiang.png',
        description: [
            '国家高级健康管理师',
            '国家高级公共营养师',
            '国家高级养生按摩师'
        ]
    },
    {
        name: '何琳芝',
        title: '/金牌健康管家',
        avatar: "https://oss.acehls.com/obj/helinzhi.png",
        description: [
            '高级健康管理师',
            '中医康复理疗师',
            '中医带电仪器技术讲师'
        ]
    },
    {
        name: '黎珍李',
        title: '/金牌减重专家',
        avatar: "https://oss.acehls.com/obj/lizhen.png",
        description: ['重庆医科大学', '营养与食品卫生学专业', '注册营养技师']
    },
    {
        name: '贾璨',
        title: '/金牌膳食营养专家',
        avatar: "https://oss.acehls.com/obj/jiac.png",
        description: ['甘肃中医药大学', '国家执业护师', '国家高级健康管理师']
    }
]

// 设备功能特点数据
const features = [
    {
        icon: '../assets/images/product/icon1.svg',
        text: '早期预警'
    },
    {
        icon: '../assets/images/product/icon2.svg',
        text: '风险监测'
    },
    {
        icon: '../assets/images/product/icon3.svg',
        text: '营养评估'
    },
    {
        icon: '../assets/images/product/icon4.svg',
        text: '健康建议'
    }
]

// 设备列表数据
const equipmentList = [
    {
        key: '1',
        tab: '鹰眼健康筛查系统',
        title: 'A.ELECTRO INTERSTITIAL SCAN',
        image: sb_1,
        description:
            '对人体各个系统、组织、器官进行全方位扫描，并综合生理、生化、激素、电解质、机体微循环平衡等检测手段全方面分析身体健康状况，为健康管理、慢病管理、临床诊断以及营养干预提供科学指导',
        features: [
            {
                icon: s_1,
                text: '早期预警'
            },
            {
                icon: s_2,
                text: '风险监测'
            },
            {
                icon: s_3,
                text: '营养评估'
            },
            {
                icon: s_4,
                text: '健康建议'
            }
        ]
    },
    {
        key: '2',
        tab: 'AI智能分析系统',
        title: 'AI INTELLIGENT ANALYSIS',
        image: sb_2,
        description:
            'AI智能分析系统由哈佛大学、塔夫茨大学和麻省理工学院的老龄化和遗传学专家联合几十个院校创建，通过上传用户的临床指标、生活方式和营养习惯，为用户提供全面的健康分析和数据驱动的健康指南',
        features: [
            {
                icon: s_1,
                text: '健康分析'
            },
            {
                icon: s_2,
                text: '数据驱动'
            }
        ]
    },
    {
        key: '3',
        tab: 'Inbody人体成分分析仪',
        title: 'INBODY COMPOSITION ANALYZER',
        image: sb_3,
        features: [
            {
                icon: s_1,
                text: '精细数据'
            },
            {
                icon: s_4,
                text: '健康管理'
            }
        ],
        description:
            'InBody人体成分分析仪通过生物电阻抗技术，快速、准确显示出受检者当前的骨骼肌、体脂率、内脏脂肪含量、水分、蛋白质、无机盐等各项精细数据，获得肥胖、营养、康复等多个领域的健康管理指标' // 添加具体描述
    },
    {
        key: '4',
        tab: '魔镜皮肤检测仪',
        title: 'MAGIC MIRROR SKIN ANALYZER',
        image: sb_4,
        features: [
            {
                icon: s_1,
                text: '人脸捕捉'
            },
            {
                icon: s_2,
                text: 'PL优化'
            },
            {
                icon: s_3,
                text: '精准识别'
            }
        ],
        description:
            '采用3D人脸捕捉、PL优化技术、图形老化处理技术，结合德国先进的光路处理技术，带来更立体、更真实的人像呈现，2000万像素快速、高效、精准得识别面部各项指标' // 添加具体描述
    },
    {
        key: '5',
        tab: '智能微体检',
        title: 'SMART HEALTH SCREENING',
        image: sb_5,
        features: [
            {
                icon: s_1,
                text: '压力指数'
            },
            {
                icon: s_2,
                text: '免疫指数'
            },
            {
                icon: s_3,
                text: '细胞修复指数'
            },
            {
                icon: s_4,
                text: '心脏负荷指数'
            }
        ],
        description:
            '智能微体检设备通过检测2min连续正常心电图，分析心跳率变异度(HRV)，可快速分析出您的压力指数、心脏负荷指数、细胞修复指数、免疫指数等' // 添加具体描述
    }
]

// // 更新专家团队数据
const expertTeam = [
    {
        name: '余金雄',
        title: '博士',
        avatar: 'https://oss.acehls.com/obj/yujinxiong1.png',
        description: [
            '长寿领域顶尖华人科学家；',
            '美国维罗里达大学终身讲席教授；',
            '在治亚州科研联盟杰出学者；',
            '美国环治亚医科大学生物技术与基因组医学研究中心主任'
        ]
    },
    {
        name: '高秀峰',
        title: '教授',
        avatar: "https://oss.acehls.com/obj/gaoxiufeng1.png",
        description: [
            '四川大学华西基础医学教教授；',
            '四川大学博士生导师；',
            '东京大学医学博士'
        ]
    },
    {
        name: '陆嘉',
        title: '主任医师',
        avatar: "https://oss.acehls.com/obj/lujia1.png",
        description: [
            '分子营养应用资深专家；',
            '代谢综合征营养调理专家；',
            '三甲医院主任医师'
        ]
    },
    {
        name: '江珂',
        title: '医学博士',
        avatar: jk,
        description: [
            '复旦大学临床医学博士；',
            '中西医结合执业医师；',
            '中西医结合内科主治医师；',
            'NME主治医师；',
            '加拿大注册营养师；',
            '从事临床医学10年；'
        ]
    },
    {
        name: '梁瑜',
        title: '副主任医师',
        avatar: ly,
        description: [
            '医学博士；',
            '副主任医师；',
            '成都市抗癌协会肿瘤精准防控委员会委员；',
            '高级健康管理师、高级营养师、心理咨询师'
        ]
    }
]

// 添加动画观察逻辑
onMounted(() => {
    const observer = new IntersectionObserver(
        entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active')
                }
            })
        },
        {
            threshold: 0.1
        }
    )

    // 观察所有带有 animate-trigger 类的元素
    document.querySelectorAll('.animate-trigger').forEach(el => {
        observer.observe(el)
    })
})
</script>

<style lang="less" scoped>
.top-banner {
    background-image: url(../assets/images/values/bg.png);
    background-size: 1324px 455px;
    background-position: bottom;
    background-repeat: no-repeat;
}
.banner2 {
    background-image: url(../assets/images/about/bg_banner.png);
    background-size: 1324px 455px;
    background-position: top;
    background-repeat: no-repeat;
}

.banner {
    .animate-trigger {
        &:nth-child(1) {
            transition-delay: 0.2s;
        }
        &:nth-child(2) {
            transition-delay: 0.4s;
        }
    }
}

:deep(.ant-timeline) {
    .ant-timeline-item {
        padding-bottom: 20px;

        &:last-child {
            padding-bottom: 0;
        }
    }
}

:deep(.ant-timeline-item-head) {
    background: transparent;
    border: none;
}

:deep(.ant-timeline-item-content) {
    inset-block-start: -21px;
}

:deep(.ant-anchor) {
    &::before {
        display: none !important;
    }
}
:deep(.ant-anchor-ink-visible) {
    display: none !important;
}

.custom-dot {
    position: relative;
    width: 16px;
    height: 16px;

    .inner-dot {
        position: absolute;
        width: 16px;
        height: 16px;
        background: #3c8916;
        border-radius: 50%;
        z-index: 3;
    }

    .ripple-1,
    .ripple-2 {
        position: absolute;
        top: -6px;
        left: -6px;
        width: 28px;
        height: 28px;
        background: rgba(60, 137, 22, 0.2);
        border-radius: 50%;
        z-index: 2;
    }

    .ripple-1 {
        animation: ripple 2s ease-out infinite;
    }

    .ripple-2 {
        animation: ripple 2s ease-out infinite 1s;
    }
}

@keyframes ripple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

:deep(.ant-timeline-item-tail) {
    border-left: 2px solid #e8e8e8;
    left: 4px;
}

.timeline-content {
    padding: 10px;
    // background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s;

    &:hover {
        background: #f0f2f5;
    }
}

// 自定义 anchor 样式
:deep(.custom-anchor) {
    .ant-anchor {
        display: flex;
        gap: 97px;
        padding: 0;
        background: transparent;
    }

    .ant-anchor-ink {
        display: none;
    }

    .ant-anchor-link {
        padding: 0;

        .ant-anchor-link-title {
            height: 48px;
            padding: 0 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 24px;
            font-size: 16px;
            color: #666;
            transition: all 0.3s ease;
            text-decoration: none;
            background: transparent;
            color: #3c8916;
            background: rgba(60, 137, 22, 0.05);
        }

        &.ant-anchor-link-active {
            .ant-anchor-link-title {
                color: #fff;
                background: #3c8916;
                font-weight: 500;
            }
        }
    }
}

.animate-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
    will-change: opacity, transform; // 优化性能

    &.active {
        opacity: 1;
        transform: translateY(0);
    }
}

// 修改服务图标样式
.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

// 优化团队成员卡片样式
.grid {
    .bg-white {
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }
    }
}

// 设备介绍 tabs 样式
:deep(.equipment-tabs) {
    .ant-tabs-nav {
        &::before {
            border-bottom: 1px solid #e8e8e8;
        }

        .ant-tabs-nav-list {
            width: 100%;
            justify-content: space-between;

            .ant-tabs-tab {
                margin: 0;
                padding: 12px 0;
                font-size: 16px;
                color: #666;

                &:hover {
                    color: #3c8916;
                }

                &.ant-tabs-tab-active {
                    .ant-tabs-tab-btn {
                        color: #3c8916;
                        font-weight: 500;
                    }
                }
            }
        }

        .ant-tabs-ink-bar {
            background: #3c8916;
            height: 2px;
        }
    }

    .ant-tabs-content {
        padding-top: 40px;
    }
}

// 添加轮播样式
:deep(.expert-swiper) {
    padding: 20px 60px;

    .swiper-button-next,
    .swiper-button-prev {
        width: 58px;
        height: 58px;
        background: #3c8916;
        border-radius: 50%;

        &::after {
            font-size: 20px;
            color: #fff;
        }

        &.swiper-button-disabled {
            background: #e8e8e8;
            opacity: 1;
        }
    }
}

// 优化分页器样式
:deep(.ant-pagination) {
    .ant-pagination-item {
        border-radius: 4px;

        &-active {
            background: #3c8916;
            border-color: #3c8916;

            a {
                color: #fff;
            }
        }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
        button {
            border-radius: 4px;
        }
    }
}
</style>
